<template>
  <calendar-date
    class="cally bg-base-100 border border-base-300 rounded-box"
    :min="min"
    :max="max"
    :value="dateValue"
    @change="modelValue = ($event.target as HTMLInputElement).value"
  >
    <svg
      aria-label="Previous"
      :class="cn('fill-current size-4', buttonClass)"
      slot="previous"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path>
    </svg>
    <svg
      aria-label="Next"
      :class="cn('fill-current size-4', buttonClass)"
      slot="next"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
    >
      <path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
    </svg>
    <calendar-month></calendar-month>
  </calendar-date>
</template>
<script setup lang="ts">
import { computed } from "vue";
import "cally";
import { cn } from "../utils";
import { formatDate } from "@vueuse/core";

interface Props {
  buttonClass?: string;
  min?: string;
  max?: string;
}
defineProps<Props>();
const modelValue = defineModel<string>();
const dateValue = computed(() => {
  return modelValue.value
    ? formatDate(new Date(modelValue.value), "YYYY-MM-DD")
    : formatDate(new Date(), "YYYY-MM-DD");
});
</script>
